<!-- Login.vue -->
<template>
  <div class="login-container">
    <h2>登录</h2>
    <form @submit.prevent="handleSubmit">
      <div class="mb-3">
        <label for="username" class="form-label">用户名</label>
        <input type="text" class="form-control" id="username" v-model="username" required>
      </div>
      <div class="mb-3">
        <label for="password" class="form-label">密码</label>
        <input type="password" class="form-control" id="password" v-model="password" required>
      </div>
      <router-link to="/Home"><button type="submit" class="btn btn-primary">登录</button></router-link>
    </form>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const username = ref('22002367');
const password = ref('22002367');

async function handleSubmit() {
  // 这里应实现实际的登录逻辑，例如发送API请求验证用户身份
  console.log('尝试登录', username.value, password.value);
  // await new Promise(resolve => setTimeout(resolve, 1000));
  // const router = useRouter();
  // router.push('/');
}
</script>

<style scoped lang="scss">
.login-container {
  max-width: 30rem;
  margin: 0 auto;
  padding: 2rem;
  background-color: #f8f9fa;
  border-radius: 10px;
  box-shadow: 0px 0.5rem 1rem rgba(0, 0, 0, 0.1);

  h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: #343a40;
  }

  form {
    display: flex;
    flex-direction: column;
    gap: 1rem;

    input {
      border: 1px solid #ced4da;
      border-radius: 5px;
      padding: 0.75rem;
      font-size: 1rem;
      box-sizing: border-box;
      width: 100%;
    }

    input:focus {
      outline: none;
      border-color: #86b7fe;
      box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    }

    button {
      background-color: #0d6efd;
      color: white;
      border: none;
      border-radius: 5px;
      padding: 0.75rem 1rem;
      cursor: pointer;
      font-size: 1rem;
      font-weight: bold;
      transition: background-color 0.3s;

      &:hover {
        background-color: #0b5ed7;
      }

      &:active {
        background-color: #0a58ca;
      }
    }
  }
}
</style>